<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<box></box>
			<el-table></el-table>
			<hr />
			<el-table></el-table>
			<hr />
			<el-table></el-table>
			<hr />
		</div>
	<template id="t1">
		<div>
			<table border="1px solid #000" cellpadding="0" cellspacing="0">
				<tr v-for="item in list">
					<td><input type="checkbox" v-model="item.isChecked" /> </td>
					<td>{{item.name}}</td>
					<td>{{item.num}}</td>
					<td>{{item.time}}</td>
				</tr>
			</table>			
		</div>
		
		
	</template>	
	
		
	<script>
		
	var Table={
		template:"#t1",
		data(){
			return {
				list:[
				    {
				        isChecked:false,
				        id:1,
				        name:"张三",
				        isIptShow:false,
				        num:10,
				        time:new Date().toLocaleString()
				    },
				    {
				        isChecked:false,
				        id:2,
				        name:"李四",
				        num:10,
				        isIptShow:false,
				        time:new Date().toLocaleString()
				    },
				    {
				        isChecked:false,
				        id:3,
				        isIptShow:false,
				        name:"王五",
				        num:10,
				        time:new Date().toLocaleString()
				    }
				]
				
			}
		}
	}	
		
		
	
		
		
	var vm=new Vue({
		el:"#app",
		data:{
			msg:'hello'
		},
		components:{
			Box:{
				template:"<div><h3 @click='show'>我是子组件 {{str}}</h3> </div>",
				data(){
					return {
						str:'hello'
					}
				},
				methods:{
					show(){
						console.log('我是子组件')
					}
				}
				
			},
			"el-table":Table
				
			
			
			
		}
	})	
		
		
		
		
	</script>	
	</body>
</html>
